<template>
  <div class="employees-container">
    <div class="app-container">
      <!-- <span>员工管理</span> -->
      <PageTools>
        <template #left>
          <i class="el-icon-info" />
          <span>本月: 社保在缴 公积金在缴</span>
        </template>
        <template #right>
          <el-button v-if="$store.getters.points.includes('dr')" type="primary" size="small" @click="go2import">导入excel</el-button>
          <el-button v-if="$store.getters.points.includes('dc')" type="primary" size="small" @click="handleDownload">导出excel</el-button>
          <!-- 自定义 -->
          <!-- <el-button v-access="'dx'" type="primary" size="small" @click="handleDownload">导出excel</el-button> -->
          <el-button type="primary" size="small" @click="addEmployee">新增员工</el-button>
        </template>
      </PageTools>
      <!-- 表格区域 -->
      <el-card style="margin-top: 10px;">
        <el-table border :data="list">
          <el-table-column label="序号" width="60" type="index" :index="indexMethod" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式" prop="formOfEmployment">
            <template #default="{row}">
              {{ hireMap[+row.formOfEmployment] || "暂无" }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间" width="200">
            <template #default="scoped">
              {{ formatTime(scoped.row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="{row}">
              <el-button type="text" size="small" @click="go2detail(row.id)">查看</el-button>
              <el-button type="text" size="small" @click="assignRole(row.id)">分配角色</el-button>
              <el-button type="text" size="small" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页1 -->
        <el-row type="flex" align="middle" justify="center" style="height:80px;">
          <el-pagination
            background
            :page-size="size"
            :current-page="page"
            layout="prev, pager, next"
            :total="total"
            @current-change="currentChange"
          />
        </el-row>

      </el-card>
      <!-- 子传父close -->
      <AddEmployee :dialog-visible="dialogVisible" @close="close" @update="getList" />
      <el-dialog
        title="分配角色"
        :visible="assignVisible"
        width="40%"
        @close="assignClose"
        @open="assignOpen"
      >
        <!-- 角色多选框 -->
        <!-- checkList：选中的多选框中的 label 组成的数组 -->
        <el-checkbox-group v-model="checkList">
          <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">
            {{ item.name }}
          </el-checkbox>
        </el-checkbox-group>
        <span slot="footer" class="dialog-footer">
          <el-button @click="assignClose">取 消</el-button>
          <el-button type="primary" @click="assignSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import { getEmployeeList, delEmployee, getRoleList, assignRoles, getUserDatilById } from '@/api'
import AddEmployee from './components/add-empliyee.vue'
import moment from 'moment'
// import { getExportData } from '@/utils/excel'
export default {

  components: {
    AddEmployee
  },
  data() {
    return {
      assignVisible: false,
      dialogVisible: false,
      // 员工列表数据
      list: [],
      page: 1, // 当前页
      size: 10, // 每页条数
      total: 0, // 总数
      hireMap: { // 枚举思想
        1: '正式',
        2: '非正式'
      },
      roleList: [],
      checkList: [],
      employeeId: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 分配角色提交、
    async assignSubmit() {
      await assignRoles({
        id: this.employeeId,
        roleIds: this.checkList
      })
      this.$message.success('分配角色完成')
      this.assignClose()
    },
    // 打开弹窗
    async assignOpen() {
      const res = await getRoleList({
        page: 1,
        pagesize: 100
      })
      this.roleList = res.data.rows
      // 对号重现
      const { data } = await getUserDatilById(this.employeeId)
      this.checkList = data.roleIds
    },
    // 分配角色
    assignRole(id) {
      this.assignVisible = true
      this.employeeId = id
    },
    // 分配角色关闭
    assignClose() {
      this.assignVisible = false
      this.checkList = []
    },
    // 获取数据
    async getList() {
      const { data } = await getEmployeeList({
        page: this.page,
        size: this.size
      })
      this.list = data.rows
      this.total = data.total
    },
    // 分页3
    currentChange(val) {
      this.page = val
      this.getList()
    },
    // 序号
    indexMethod(index) {
      // 员工的序号从1开始一直到totle为止
      // index是方法中的内震参数·从0开始
      // 所以第一条需要在index的基础上加1
      // 每翻一页都需要在序号的基础上加10
      return index + 1 + (this.page - 1) * 10
    },
    // 时间格式化
    formatTime(time) {
      if (time) {
        return moment(time).format('YYYY-MM-DD')
      } else {
        return '时间格式错误'
      }
    },
    addEmployee() {
      this.dialogVisible = true
    },
    close() {
      this.dialogVisible = false
    },
    // 删除角色
    del(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delEmployee(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 重新渲染
        this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 导入
    go2import() {
      this.$router.push('/import')
    },
    // 查看
    go2detail(id) {
      this.$router.push({
        path: `/employeeDetail/${id}`
        // params 传参 需要使用name跳转也可使用path跳转
        // 而且传递参数不会出现  不建议 会丢失
        // query: {
        //   id: id
        // }
      })
    },

    // 导出功能
    async handleDownload() {
      import('@/vendor/Export2Excel').then(async excel => {
        // 调用员工列表接口，获取要导出的员工列表
        // const res = await getEmployeeList(this.params)
        // 数据转换
        // 表头
        const header = ['姓名', '手机号', '入职日期', '工号', '聘用形式', '部门']
        // 中英对照关系
        const headerRelation = {
          '姓名': 'username',
          '手机号': 'mobile',
          '入职日期': 'timeOfEntry',
          '工号': 'workNumber',
          '聘用形式': 'formOfEmployment',
          '部门': 'departmentName'
        }
        // 根据员工列表数据、表头、中英文对应关系，将数据转换成二维数组
        const data = this.getExportData(header, this.list, headerRelation)
        // 导出
        excel.export_json_to_excel({
          // 表头 header 必填，是一个数组
          header: header,
          // 表格 body 具体数据，是一个二维数组
          data: data,
          filename: 'excel-list', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    },
    // 导出数据处理
    getExportData(header, list, headerRelation) {
      // header 决定有多少行，也就是二维数组中有多少个小数组
      // list 决定有多少列，每个小数组中有多少项
      const twoArr = []
      list.forEach(item => {
        const arr = []
        header.forEach(key => {
          // key 是中文handleDownload
          // enKey 是英文
          // 根据字段的中英对照关系，拿到英文 key
          const enKey = headerRelation[key]
          if (enKey === 'formOfEmployment') {
            // 如果是 数字转文字
            arr.push(this.formatFormOfEmpoyment(item[enKey]))
          } else {
            // 将一行中的每个字段的值加入到第二维数组中
            // 如果不是 直接添加
            arr.push(item[enKey])
          }
        })
        twoArr.push(arr)
      })
      return twoArr
    },

    formatFormOfEmpoyment(type) {
      const map = {
        1: '正式',
        2: '非正式'
      }
      // 返回文字
      return map[+type] || '暂无'
    }
  }
}
</script>

<style lang="scss" scoped>employee-container {padding: 30px;}
</style>
